<template>
  <div class="img-body-contain">
    <div class="img-contain">
      <el-carousel trigger="click" height="200px" :autoplay="false">
        <el-carousel-item v-for="item in imgInfo" :key="item.name">
          <el-image fit="contain" :src="item.url" @click="showTheImg(item)">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </el-carousel-item>
        <el-image
          v-if="showbigImg"
          style="width: 100%; height: 100%"
          :src="url"
          :preview-src-list="srcList"
        >
        </el-image>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "ImgList",
  props: {
    imgInfo: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showbigImg: false,
      bigImgUrl: null,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "http://106.12.254.129:39896/pisserver/file/download?eventID=48d64c95-306a-4fd0-af76-7887838f43af",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  methods: {
    showTheImg(data) {
      this.$openPreview([data.url]);
    },
  },
};
</script>

<style  lang="scss" scoped>
.img-body-contain {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 30px;
  height: 200px;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  .img-contain {
    width: 600px;
    height: 200px;
  }
  /* border: 1px solid red;
  left: 50%;
  transform: translateX(-50%); */
}
</style>
<style>
.img-body-contain .el-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-body-contain .el-image > img {
  width: 50%;
}
</style>